<!DOCTYPE html>
<html>
<head>
    <title>Gap and spacing</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" >

    <link href="../../content/shared/styles/examples-offline.css" rel="stylesheet">
    <link href="../../../styles/kendo.dataviz.min.css" rel="stylesheet">

    <script src="../../../js/jquery.min.js"></script>
    <script src="../../../js/kendo.dataviz.min.js"></script>
    <script src="../../content/shared/js/console.js"></script>
</head>
<body>
    <a class="offline-button" href="../index.html">Back</a>
    <div id="example" class="k-content">
    <div class="configuration k-widget k-header" style="width: 80px">
        <span class="configHead">Gap and spacing</span>
        <ul class="options">
            <li>
                <button id="getGap" class="k-button">Set gap</button>
                <input id="gap" type="number" value="1.5" step="0.1" style="width: 60px;" />
            </li>
            <li>
                <button id="getSpacing" class="k-button">Set spacing</button>
                <input id="spacing" type="number" value="0.4" step="0.1" style="width: 60px;" />
            </li>
        </ul>
    </div>
    <div class="chart-wrapper">
        <div id="chart"></div>
    </div>
</div>

<script>    function createChart() {
        $("#chart").kendoChart({
            theme: $(document).data("kendoSkin") || "default",            title: {
                text: "Internet Users"
            },            legend: {
                position: "bottom"
            },            seriesDefaults: {
                type: "column"
            },            series: [{
                name: "United States",                data: [67.96, 61.93, 75, 71, 78]
            }, {
                name: "World",                data: [15.7, 11, 20, 25, 36.6]
            }],            valueAxis: {
                labels: {
                    format: "{0}%"
                }
            },            categoryAxis: {
                categories: [2005, 2006, 2007, 2008, 2009]
            },            tooltip: {
                visible: true,                format: "{0}%"
            }
        });
    }

    $(document).ready(function () {
        setTimeout(function () {
            // Initialize the chart with a delay to make sure
            // the initial animation is visible
            createChart();

            $("#example").bind("kendo:skinChange", function (e) {
                createChart();
            });

            var chart = $("#chart").data("kendoChart"),
                firstSeries = chart.options.series;

            $("#getGap").click(function () {
                firstSeries[0].gap = parseFloat($("#gap").val(), 10);
                chart.redraw();
            });

            $("#getSpacing").click(function () {
                firstSeries[0].spacing = parseFloat($("#spacing").val(), 10);
                chart.redraw();
            });
        }, 400);

        if (kendo.ui.NumericTextBox) {
            $("#gap").kendoNumericTextBox();
            $("#spacing").kendoNumericTextBox();
        }
    });
</script>

<style scoped>
    .chart-wrapper {
        margin: 0 0 0 20px;
        width: 466px;
        height: 434px;
        background: url("../../content/shared/styles/chart-wrapper-small.png") transparent no-repeat 0 0;
    }
                
    .chart-wrapper .k-chart {
        height: 280px;
        padding: 37px;
        width: 390px;
    }
    
    .configuration input {
        float: right;
    }
</style>
</body>
</html>
